<template>
  <div class="custom-title" :style="getStyle">
    <div
      v-if="showLine"
      class="title-line"
      :style="{
        backgroundColor: lineColor,
        width: lineWidth,
        height: fontSize - 2 + 'px',
        'margin-right': fontSize * 0.5 + 'px',
        borderRadius: lineRadius
      }"
    />
    <div
      class="title-text"
      :style="{
        color: fontColor,
        fontSize: fontSize + 'px',
        justifyContent: titleAlign,
        fontWeight: fontWeight
      }"
    >
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomTitle',
  props: {
    showLine: {
      type: Boolean,
      default: true
    },
    showBorderLine: {
      type: Boolean,
      default: false
    },
    lineColor: {
      type: String,
      default: '#409EFF'
    },
    lineWidth: {
      type: String,
      default: '3px'
    },
    lineRadius: {
      type: String,
      default: '3px'
    },
    fontColor: {
      type: String,
      default: '#303133'
    },
    fontSize: {
      type: Number,
      default: 14
    },
    fontWeight: {
      type: String,
      default: 'normal'
    },
    backgroundColor: {
      type: String,
      default: undefined
    },
    titleAlign: {
      type: String,
      default: 'left'
    },
    paddingTop: {
      type: Number,
      default: 0
    }
  },
  computed: {
    getStyle() {
      const hasBackground = this.backgroundColor != null && this.backgroundColor !== '';
      let borderBottom = this.fontSize * 0.8;
      if (this.showBorderLine && !hasBackground) {
        borderBottom = 8;
      }
      return {
        backgroundColor: this.backgroundColor,
        'border-bottom': this.showBorderLine ? '1px solid #DCDFE6' : 'none',
        'padding-top': (hasBackground ? this.fontSize * 0.8 : this.paddingTop || 0) + 'px',
        'padding-bottom': (this.showBorderLine || hasBackground ? borderBottom : 0) + 'px',
        'padding-left': (hasBackground ? this.fontSize * 1.1 : 0) + 'px',
        'padding-right': (hasBackground ? this.fontSize * 1.1 : 0) + 'px'
      };
    }
  }
};
</script>

<style scoped>
.custom-title {
  display: flex;
  align-items: center;
  border-radius: 3px;
}
.title-line {
  border-radius: 1px;
  margin-right: 6px;
}
.title-text {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  height: 1;
  line-height: 1;
  font-weight: 500;
}
</style>
